import React from 'react';
import { Link } from 'gatsby';

import Layout from '../components/layout';
import Image from '../components/image';
import { Button, Input } from 'antd';
// import  "./index.less";

const testTemplate = { name: 'ceshi', value: 'shujushuju' };
const list = [];

for (let i = 0; i < 1; i++) {
	let ob = { ...testTemplate };
	list.push(ob);
}

const IndexPage = () => (
	<Layout>
		<h1>Hi people</h1>
		<p>Welcome to your new Gatsby site.</p>
		<p>Now go build something great.</p>
		<div>
			<Input />
			<Button type="primary">测试按钮</Button>
		</div>

		<div style={{ maxWidth: '300px', marginBottom: '1.45rem' }}>
			<Image />
			{list.map((item, key) => {
				return (
					<div key={key}>
						<p>姓名：{item.name}</p>
						<p>内容：{item.value}</p>
					</div>
				);
			})}
		</div>
		<div style={{display:"flex", flexDirection:"column"}}>
			<Link to="/page-2/">Go to page 2</Link>
			<Link to="/about-css-modules/">Go to css module</Link>
			<Link to="/phone-ani/">Go to 手机 动画</Link>
		</div>
	</Layout>
);

export default IndexPage;
